<template>
    <div>
        <p>{{count}}</p>
        <p>{{obj.name}}</p>
        <p>{{obj.age}}</p>
        <p>{{obj.dableCount}}</p>
        <input type="text" v-model="count">
        <input type="text" v-model="name">
        <button @click="getName">getName</button>
    </div>
</template>
<script>
import { ref, reactive, onMounted, computed, watch, toRefs } from 'vue'
export default {
    props: {
        title: {
            type: String,
            required: true
        }
    },
    setup (props, { emit }) {
        const count = ref(12)
        const count1 = ref(15)
        const { title } = toRefs(props)
        console.log(title.value)
        const obj = reactive({
            name: 'upload',
            age: 18,
            dableCount: computed(() => count.value * 2),
            getAndset: computed({
                get: () => count.value + 1,
                set: (val) => {
                    count.value = val - 1
                }
            })
        })
        const name = ref('')
        // 普通方法
        const getName = () => {
            name.value = obj.name
            emit('eventData', name.value) // 向父组件传数据
        }
        // 钩子函数
        onMounted(() => {
            console.log('mounted')
        })
        // 监听函数
        test(toRefs(obj))
        watch([count, () => obj.name], ([A, B], [preA, preB]) => {
            console.log(preA)
            console.log(preB)
        })
        return {
            count,
            obj,
            count1,
            name,
            title,
            getName
        }
    }
}
function test (data) {
   console.log(data.name.value)
}
</script>
<style lang="scss" scoped>

</style>